import React from 'react';
import { Row, Col, Form, Input, Button, Spin, Table, Select, Popconfirm, Card } from 'antd';
import moment from 'moment';
import { getJsonReactNode } from '../../../utils';
import { DEFAULT_PAGE_SIZE } from '../../../utils/constants';
import styles from '../../common.css';
import TestReportModal from './TestReportModal';


const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

@Form.create()
class TestReportTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { // 状态树，存储各个控件的状态值，供外部调用
      currentRecord: {}, // 定义当前行变量，通过判断变量是否有值来决定走新增 or 修改
      panelVisible: false, // 定义是否显示新增/编辑弹窗页面
      searchButtonVisible: true, // 查询按钮是否可用
    };
  }
    // 全局监听事件
  componentDidMount(){
    document.addEventListener('keyup',this.onKeyDown);
  }
  componentWillUnmount(){
    document.removeEventListener('keyup',this.onKeyDown);
  }
  // 添加事件
  onKeyDown=(e) => {
    if(e.keyCode===13){
      this.handleSearch()
    }
  }
  handleSearch = () => { // 查询方法
    const {  // 该组件的属性，由外部传入参数
      dispatch,
      form: { validateFields, getFieldsValue },
    } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
      };
      dispatch({ // 调用接口，请求数据
        type: 'testreport/fetchTestReport', //  models的namespace + effects的方法名，也可以是reducers的方法
        payload: {
          getparams: data,
        },
      });
    });
  };
  handleAddTestReport = () => {
    this.setState({ // 设置状态树
      currentRecord: {},  // 设置状态树中当前行对象为空，这样可通过判断对象是否为空，来决定走编辑or新增
      panelVisible: true, // 设置新增/编辑表单可见
      searchButtonVisible: false,
    });
  };
  handleUpdateTestReport = (record) => {
    this.setState({ // 设置状态树
      currentRecord: record,  // 设置状态树中当前行对象为空，这样可通过判断对象是否为空，来决定走编辑or新增
      panelVisible: true, // 设置新增/编辑表单可见
      searchButtonVisible: true,
    });
  };
  // 将获取到的接口数据进行渲染
  render() {
    const { dispatch, loading, testreportinfo, testreportinfoDetail, projectlist, RelatedJira, bug_desc, bug_details, demand_detail, form: { getFieldDecorator } } //
      = this.props;
    const status = [
      {
        id: 0,
        name: '未发布',
      },
      {
        id: 1,
        name: '通过',
      },
      {
        id: 2,
        name: '不通过',
      },
    ];
    // 定义表头字段及取值内容
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: 'report_name',
        dataIndex: 'report_name',
        key: 'report_name',
      },
      {
        title: 'project_name',
        dataIndex: 'project_name',
        key: 'project_name',
      },
      {
        title: 'version',
        dataIndex: 'fix_version',
        key: 'fix_version',
      },
      {
        title: 'reporter',
        dataIndex: 'reporter',
        key: 'reporter',
      },
      {
        title: 'status',
        dataIndex: 'status',
        key: 'status',
        render: (text, record) => {
          let res = '';
          switch (text) {
            case 0:
              res = '未发布';
              break;
            case 1:
              res = '通过';
              break;
            case 2:
              res = '不通过';
              break;
            default:
              res = text;
          }
          return res;
        },
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',
        render: (text, record) => {
          // const d1 = moment(text).utc(); // utc 时间转换成本地时间
          return moment(text).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div className={styles.operation}>
              <a
                onClick={() => this.handleUpdateTestReport(record)}
              >
                修改
              </a>
            </div>
          );
        },
      },
    ];
    const modalProps = {
      dispatch,
      loading,
      testreportinfo,
      testreportinfoDetail,
      projectlist,
      RelatedJira,
      bug_desc,
      bug_details,
      demand_detail,
      visible: this.state.panelVisible,
      currentUser: this.state.currentRecord,
      ButtonVisible: this.state.searchButtonVisible,
      onCancel: () => {
        this.setState({
          currentRecord: {},
          panelVisible: false,
          searchButtonVisible: false,
        });
      },
    };
    return (
      <div>
        {
          this.state.panelVisible ?
            (
              <TestReportModal {...modalProps} />
            ) :
            (
              <div>
                <Card style={{ marginBottom: 16 }}>
                  <Row gutter={20}>
                    <Form>
                      <Col span={8}>
                        <FormItem
                          label="project_name"
                          {...formItemLayout}
                        >
                          {getFieldDecorator('project_name', {
                            initialValue: '',
                          })(
                            <Select
                              showSearch
                              optionFilterProp="children"
                              filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            >
                              <Option key={-1} value="">请选择项目名称</Option>
                              {// 这括号表示括起来的是一个表达式 不同于函数的括号，这里面只能放一个表达式
                                projectlist.map((item, index) => {
                                  return (<Option key={index} value={item}>{item}</Option>);
                                })
                              }
                            </Select>
                          )}
                        </FormItem>
                      </Col>
                      <Col span={8}>
                        <FormItem
                          label="version"
                          {...formItemLayout}
                        >
                          {getFieldDecorator('fix_version', {
                            initialValue: '',
                          })(
                            < Input />
                          )}
                        </FormItem>
                      </Col>
                      <Col span={8}>
                        <FormItem
                          label="status"
                          {...formItemLayout}
                        >
                          {getFieldDecorator('status', {
                            initialValue: '',
                          })(
                            <Select>
                              <Select.Option key={-1} value="">请选择状态</Select.Option>
                              {
                                status.map((item, index) => {
                                  return (
                                    <Select.Option key={index} value={item.id}>{item.name}</Select.Option>
                                  );
                                })
                              }
                            </Select>
                          )}
                        </FormItem>
                      </Col>
                      <Col span={8}>
                        <FormItem
                          label="reporter"
                          {...formItemLayout}
                        >
                          {getFieldDecorator('reporter', {
                            initialValue: '',
                          })(<Input />)}
                        </FormItem>
                      </Col>
                      <Col span={8}>
                        <FormItem
                          label="report_name"
                          {...formItemLayout}
                        >
                          {getFieldDecorator('report_name', {
                            initialValue: '',
                          })(
                            < Input />
                          )}
                        </FormItem>
                      </Col>
                      <Col span={8}>
                        <div className={styles.btnGroup}>
                          <Button
                            style={{ margin: 8 }}
                            type="primary"
                            loading={loading}
                            onClick={this.handleSearch}
                          >
                            查询
                          </Button>
                          <Button type="primary" onClick={this.handleAddTestReport}>新增</Button>
                        </div>
                      </Col>
                    </Form>
                  </Row>
                </Card>
                <Table
                  columns={columns}
                  dataSource={testreportinfo}
                  loading={loading}
                  rowKey={record => record.id}
                  pagination={{
                    pageSize: DEFAULT_PAGE_SIZE,
                  }}
                  bordered
                />
              </div>
            )
        }
      </div>
    );
  }
}

export default TestReportTable;
